<template>
  <div style="display: flex; height: 100vh;">
    <!-- 侧边栏 -->
    <el-menu
      :default-active="activeIndex"
      class="el-menu-vertical-demo"
      @select="handleSelect"
    >
      <el-menu-item index="1">
		 <i class="el-icon-edit"></i>
		博客
		</el-menu-item>
      <el-menu-item index="2">
		  <i class="el-icon-more"></i>
		项目
		</el-menu-item>
      <el-menu-item index="3">
		  <i class="el-icon-warning-outline"></i>
		  大事记
		  </el-menu-item>
		  <el-menu-item index="4">
		  	  <i class="el-icon-user"></i>
		  	 我的
		  </el-menu-item>
    </el-menu>
	
	
    <!-- 右侧内容区域 -->
    <!-- 组件容器限制最大宽度为50% -->
          <div style="max-width: 800px; width: 100%; margin: 0 auto;"> <!-- 自动水平居中 -->
            <component :is="currentComponent"></component>
          </div>
  </div>
</template>

<script>
import Blog from '@/pages/blog/blog.vue';
import Project from '@/pages/projects/projects.vue';
import Milestone from '@/pages/milestone/milestone.vue';
import My from '@/pages/my/my.vue'
export default {
  components: {
    Blog,
    Project,
    Milestone,
	My
  },
  data() {
    return {
      activeIndex: '1',
      currentComponent: Blog
    };
  },
  methods: {
    handleSelect(index) {
      this.activeIndex = index;
      switch (index) {
        case '1':
          this.currentComponent = Blog;
          break;
        case '2':
          this.currentComponent = Project;
          break;
        case '3':
          this.currentComponent = Milestone;
          break;
		 case '4':
		   this.currentComponent = My;
		   break; 
        default:
          this.currentComponent = Blog;
      }
    }
  }
};
</script>

<style scoped>
.el-menu-vertical-demo {
  min-height: 100vh;
}
</style>    